<template>
<div>
    <!--搜索栏-->
    <el-form :inline="true" :model="formInline" class="user-search">
        <el-form-item label="搜索：">
            <el-select v-model="formInline.logType" placeholder="请选择变动类型">
                <el-option v-for="item in logTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-search" @click="getData">搜索</el-button>
        </el-form-item>
    </el-form>

    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
        <el-table-column  align="center"  sortable prop="materialName" label="材料名称"></el-table-column>
        <el-table-column  align="center"  sortable prop="amount" label="数量"></el-table-column>
        <el-table-column  align="center"  sortable prop="unit" label="单位"></el-table-column>
        <el-table-column  align="center"  sortable prop="logType" :formatter="formatMaterialLogType" label="变动类型"></el-table-column>
        <el-table-column  align="center"  sortable prop="createUserName" label="操作人"></el-table-column>
        <!-- <el-table-column  align="center"  sortable prop="receiveUserName" label="领取人"></el-table-column> -->
        <el-table-column  align="center"  sortable prop="createTime" label="操作时间"></el-table-column>
        <el-table-column  align="center"  sortable prop="remark" label="备注"></el-table-column>
        <!-- <el-table-column align="center" label="操作">
            <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDel(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column> -->
    </el-table>

    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
</div>
</template>

<script>
import * as api from '../../api/interface'
import Pagination from '../../components/Pagination'
export default {
    data() {
        return {
            loading: false, //是显示加载
            editFormVisible: false, //控制编辑页面显示与隐藏
            title: '',
            editForm: {},
            // rules表单验证
            // rules: {
                // userName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                // userAccount: [{ required: true, message: '请输入账号', trigger: 'blur' }],
                // userPassword: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                // userType: [{ required: true, message: '请输入用户类型', trigger: 'blur' }],
                // phoneNumber: [{ required: true, message: '请输入电话号码', trigger: 'blur' }]
            // },
            //查询条件
            formInline: {
                page: 1, //当前页面
                limit: 10, //每页数量
                logType: ''
            },
            // 删除部门
            seletedata: {
                ids: '',
                token: localStorage.getItem('logintoken')
            },
            listData: [], //用户数据
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 10,
                total: 10
            },
            logTypes: [
                { value: "1", label: "入库" },
                { value: "2", label: "废弃" },
                { value: "3", label: "领用" },
            ],
        }
    },
    // 注册组件
    components: {
        Pagination
    },
    /**
     * 页面初始化方法
     */
    created() {
        console.log(this.$store.state.userInfo)
        this.getData()
    },
    methods: {
        formatMaterialLogType: function (row, column) {
            return row.logType == '1' ? "入库" :
                row.logType == "2" ? "废弃" :
                row.logType == "3" ? "领用" :
                "未知";
        },
        // 获取列表数据
        getData() {
            this.loading = true
            let para = {
                current: this.formInline.page,
                size: this.formInline.limit,
                logType: this.formInline.logType  //按类型查询
            }
            api.queryMaterialLogByPage(para).then(data => {
                this.logining = false;
                if (data.message != "success") {
                    this.logining = false;
                    this.$message.error(data.message)
                } else {
                    this.loading = false
                    this.listData = data.returnPage.records
                    this.pageparm.currentPage = data.returnPage.current
                    this.pageparm.pageSize = data.returnPage.size
                    this.pageparm.total = data.returnPage.total
                }
            }).catch(e => {
                this.logining = false;
            });
        },
        // 分页插件事件
        callFather(parm) {
            this.formInline.page = parm.currentPage
            this.formInline.limit = parm.pageSize
            this.getData()
        },
        // //显示添加界面
        // handleAdd: function (index, row) {
        //     this.editFormVisible = true
        //     this.title = '新增'
        //     this.editForm = {}
        // },
        // //显示编辑界面
        // handleEdit: function (index, row) {
        //     this.editFormVisible = true
        //     this.title = '编辑'
        //     this.editForm = row
        // },
        // // 关闭编辑
        // closeDialog() {
        //     this.editFormVisible = false
        // },
        // // 编辑、增加页面保存方法
        // submitForm(editData) {
        //     this.$refs[editData].validate(valid => {
        //         if (valid) {
        //             let para = Object.assign({}, this.editForm);
        //             this.loading = true;
        //             api.updateMaterialLog(para)
        //                 .then(res => {
        //                     this.loading = false;
        //                     if (res.message == 'success') {
        //                         this.$message({ message: "提交成功", type: "success" });
        //                         this.getData();
        //                         this.editFormVisible = false;
        //                     } else {
        //                         this.$message({ type: 'error', message: res.message })
        //                     }
        //                 })
        //                 .catch(e => {
        //                     // this.editFormVisible = false
        //                     this.loading = false
        //                 })
        //         } else {
        //             return false
        //         }
        //     })
        // },
        // // 删除
        // handleDel(index, row) {
        //     this.$confirm('确定要删除吗?', '信息', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
        //         .then(() => {
        //             let para = {
        //                 userId: row.userId
        //             }
        //             api.delMaterialLog(para)
        //                 .then(res => {
        //                     if (res.message == 'success') {
        //                         this.$message({ message: "删除成功", type: "success" });
        //                         this.getData();
        //                     } else {
        //                         this.$message({ type: 'error', message: res.message })
        //                     }
        //                 })
        //                 .catch(e => {
        //                     this.loading = false
        //                 })
        //         });
        // }
    }
}
</script>

<style scoped>
.user-search {
    margin-top: 20px;
}
</style>
